.tab{
    position: fixed;
    bottom: 0;
    height: 1rem;
    width: 100%;
    background: white;
    box-shadow: 0 -3px 10px 0 rgba(0,0,0,.2);
    display: flex;
    z-index: 100;
}
.tab>.tabItem{
    flex: 1;
}
.tab>.tabItem.active{
    color: #2196f3;
    font-weight: bolder;
}
.itemIcon{
    line-height: .6rem;
    text-align: center;
    font-size: .44rem;
    transition: all 0.5s ease-in-out;
}
.itemName{
    height: 35%;
    text-align: center;
    font-size: .24rem;
    line-height: .4rem;
    transition: all .5s;
}
.activeIcon{
    animation: bounceTo 0.5s;
}
@keyframes bounceTo {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    to {
        transform: scale(1);
    }
}